<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>


<!--        侧边栏-->
<div class="col-md-3 cl-right" th:fragment="component-sidebar">
    <!--        个人信息、联系方式。。。-->
    <div class="right-card">

        <div class="right-card-main">
            <!--                    头像-->
            <div class="cl-code" style="margin-top: 0">
                <img src="/img/chat-icon/header-logo.jpg" class="header-logo-img">
                <p>codefish</p>
                <div class="header-info">
                    <span style="font-weight: bolder">文章</span>
                    <span style="font-weight: bolder">点赞</span>
                    <span style="font-weight: bolder">访问</span>
                </div>
                <div class="header-info">
                    <span style="color: deepskyblue">14</span>
                    <span style="color: deepskyblue">655</span>
                    <span style="color: deepskyblue">2357</span>
                </div>

            </div>
            <!--                    联系方式-->
            <div class="cl-code" id="chat-ico-group">
                <a id="head-qq-code" href="javascript:">
                    <img src="/img/chat-icon/QQ-circle-fill-active.png" class="cl-code-icon">
                </a>
                <a id="head-wechat-code" href="javascript:">
                    <img src="/img/chat-icon/wechat-active.png" class="cl-code-icon">
                </a>

                <a href="https://gitee.com/hzf2281" target="_blank"><img src="/img/chat-icon/gitee-active.png"
                                                                         class="cl-code-icon" id="head-gitee-link"></a>
                <a href="https://github.com/codeNoob2281" target="_blank"><img src="/img/chat-icon/github-active.png"
                                                                               class="cl-code-icon"
                                                                               id="head-github-link"></a>
            </div>

        </div>
    </div>
    <!--            文章列表侧边导航-->
    <div class="right-card">

        <div class="right-card-main">
            <div class="right-card-title">最新文章</div>
            <div class="right-recommended">
                <a href="#" th:href="@{/article/{id} (id=${session.newArticle.get(0).articleId})}">
                    <img src="/temporary-img/list-right.jpg"
                         th:src="@{/file/{id} (id=${session.newArticle.get(0).articleCover})}" class="img-fluid" alt="">
                </a>
            </div>
            <ul class="right-recommended-list">
                <li th:each="item : ${session.newArticle}">
                    <a href="../static/js/blog-details.html" th:href="@{/article/{id} (id=${item.articleId})}">
                        <i class="fa fa-angle-right" aria-hidden="true"></i>
                        <span th:text="${item.articleTitle}">如何有效避免设计作品“空”？</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!--          文章热门标签集-->
    <div class="right-card">

        <div class="right-card-main">
            <div class="right-card-title">热门标签</div>
            <ul class="label">
                <li><a href="#">Java</a></li>
                <li><a href="#">网络</a></li>
                <li><a href="#">算法</a></li>
                <li><a href="#">Redis</a></li>
                <li><a href="#">Spring</a></li>
            </ul>
        </div>
    </div>
</div>


</body>
</html>